<template>
  <div class="word-detail-content">
    <!-- 发音 -->
    <div v-if="wordData && wordData.pronunciation" class="pronunciation-section detail-card">
      <div class="phonetic-item">
        <el-tag v-if="wordData && wordData.phonetic" type="info" size="default">
          <span class="phonetic">{{ wordData.phonetic }}</span></el-tag>
      </div>
      <el-icon @click="playPronunciation" class="play-icon">
        <VideoPlay />
      </el-icon>
    </div>
    <!-- 词义和词形变化横向排列 -->
    <div class="meanings-variations-container">
      <!-- 词义 -->
      <div v-if="wordData && wordData.meanings && wordData.meanings.length > 0" class="meanings-section detail-card">
        <h4>词义</h4>
        <div v-for="(meaning, index) in wordData.meanings" :key="index" class="meaning-item">
          <div v-if="meaning.partOfSpeech" class="part-of-speech">
            <el-tag type="success" size="small">{{ meaning.partOfSpeech }}</el-tag>
            <el-text v-if="meaning.explanations && meaning.explanations.length > 0">
              {{ meaning.explanations.join('; ') }}
            </el-text>
          </div>
        </div>
      </div>

      <!-- 词性变化 -->
      <div v-if="wordData && wordData.variations && wordData.variations.length > 0"
        class="variations-section detail-card">
        <h4>词性变化</h4>
        <div v-for="(variation, index) in wordData.variations" :key="index" class="variation-item">
          <!-- <span class="variation-word">{{ variation.wordForm }}</span> -->
          <el-tag type="success" size="small" v-if="variation.partOfSpeech" class="variation-pos">({{
            variation.partOfSpeech }})</el-tag>
          <span v-if="variation.explanation" class="variation-explanation">{{ variation.explanation }}</span>
        </div>
      </div>
    </div>

    <!-- 常用词组 -->
    <div v-if="wordData && wordData.phrases && wordData.phrases.length > 0" class="phrases-section detail-card">
      <h4>常用词组</h4>
      <div class="phrases-container">
        <div v-for="(phrase, index) in wordData.phrases" :key="index" class="phrase-item">
          <div class="phrase-original">
            <span>{{ phrase.wordForm || phrase.original }}</span>
            <span v-if="phrase.explanation">{{ " " + phrase.explanation }}</span>
          </div>
          <div v-if="phrase.examples && phrase.examples.length > 0" class="phrase-examples">
            <div v-for="(example, exIndex) in phrase.examples" :key="exIndex"
              :style="exIndex === phrase.examples.length - 1 ? 'border-right: 0;' : ''" class="phrase-example">
              <div class="example-original">{{ example.original }}</div>
              <div class="example-translation">{{ " " + example.translation }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 例句 -->
    <div v-if="hasExamples" class="examples-section detail-card">
      <h4>例句</h4>
      <div v-for="(meaning, index) in wordData.meanings" :key="index">
        <div v-for="(example, exIndex) in meaning.examples" :key="exIndex"
          :style="exIndex === meaning.examples.length - 1 ? 'border-right: 0;' : ''" class="example-item">
          <div class="example-original">{{ example.original }}</div>
          <div class="example-translation">{{ example.translation }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElTag, ElButton, ElIcon } from 'element-plus'
import { VideoPlay } from '@element-plus/icons-vue'

export default {
  name: 'WordDetailDisplay',
  components: {
    ElTag,
    ElButton,
    ElIcon,
    VideoPlay
  },
  props: {
    wordData: {
      type: Object,
      default: null
    }
  },
  emits: ['play-pronunciation'],
  computed: {
    hasExamples() {
      if (!this.wordData || !this.wordData.meanings) return false;
      return this.wordData.meanings.some(meaning => meaning.examples && meaning.examples.length > 0);
    }
  },
  methods: {
    playPronunciation() {
      this.$emit('play-pronunciation');
    }
  }
}
</script>

<style scoped lang="scss">
.word-detail-content {
  font-family: "fangsong";
  .detail-card {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    h4 {
      font-size: 1.2rem;
      color: #212529;
      margin-bottom: 15px;
      font-weight: 600;
      margin-top: 5px;
    }
  }

  .pronunciation-section {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .phonetic-item {
      .phonetic {
        margin-left: 0px;
        font-size: 1.1rem;
        font-weight: 500;
        color: #495057;
      }
    }

    .play-icon {
      font-size: 24px;
      color: #409eff;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.1);
        color: #337ecc;
      }
    }
  }

  .meanings-variations-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 15px;
    }

    .meanings-section,
    .variations-section {
      max-width: 100%;
      min-width: 30%;
    }
    .variations-section {
      width: fit-content;
      max-width: 50%;
      min-width: 30%;
    }
  }

  .part-of-speech {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .el-tag {
      margin-right: 10px;
    }

    .el-text {
      font-size: 1rem;
      color: #495057;
    }
  }

  .variation-item {
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .variation-pos {
      margin-right: 5px;
    }

    .variation-explanation {
      font-size: 1rem;
      color: #495057;
    }
  }

  .phrases-section {
    .phrase-item {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .phrase-original {
        font-weight: 500;
        font-size: 1.05rem;
        color: #212529;
        margin-bottom: 5px;
        margin-left: 10px;
        text-decoration: underline;
        font-style: italic;
      }

      .phrase-explanation {
        color: #495057;
        margin-bottom: 8px;
        font-size: 0.95rem;
      }

      .phrase-examples {
        .phrase-example {
          flex-direction: row;
          gap: 8px;
          margin-top: 8px;
          padding-left: 10px;
          border-right: 1px solid lightgray;
          display: inline-block;
          margin-right: 10px;
          padding-right: 10px;

          .example-original {
            font-family: 'DynaPuff', sans-serif;
            font-size: 1rem;
            color: #212529;
            margin-bottom: 3px;
          }

          .example-translation {
            font-size: 0.95rem;
            color: #495057;
            font-style: italic;
          }
        }
      }
    }
  }

  .examples-section {
    .example-item {
      margin-bottom: 15px;
      flex-direction: row;
      border-right: 1px solid lightgray;
      display: inline-block;
      margin-right: 10px;
      padding-right: 10px;
      gap: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      .example-original {
        font-family: 'DynaPuff', sans-serif;
        font-size: 1.1rem;
        color: #212529;
        margin-bottom: 5px;
        line-height: 1.4;
      }

      .example-translation {
        font-size: 1rem;
        color: #495057;
        line-height: 1.4;
        font-style: italic;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .detail-card {
      padding: 15px;
      margin-bottom: 15px;

      h4 {
        font-size: 1.1rem;
        margin-bottom: 12px;
      }
    }

    .meanings-variations-container {
      flex-direction: column;
      gap: 15px;
    }

    .phrases-section {
      .phrase-item {
        margin-bottom: 12px;
        padding-bottom: 12px;

        .phrase-original {
          font-size: 1rem;
        }

        .phrase-explanation {
          font-size: 0.9rem;
        }

        .phrase-examples {
          .phrase-example {
            .example-original {
              font-size: 0.95rem;
            }

            .example-translation {
              font-size: 0.9rem;
            }
          }
        }
      }
    }

    .examples-section {
      .example-item {
        margin-bottom: 12px;

        .example-original {
          font-size: 1rem;
        }

        .example-translation {
          font-size: 0.95rem;
        }
      }
    }
  }
}
</style>